<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
    <!--table表示普通的表格样式，table-striped表示斑马线的表格样式，table-bordered表示加上1px的边框，table-hover表示鼠标悬停效果-->
    <!--<table class="table table-striped table-bordered table-hover">-->
    <!--table-condensed表示紧凑型表格-->
    <table class="table table-condensed">
        <!--thead表示表头，有加粗效果-->
        <thead>
        <!--五种表示状态的颜色，悬停active灰色，成功success绿，信息info蓝，警告waring黄，危险danger红-->
        <tr class="active">
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>

        <!--tbody表示表格内容-->
        <tbody>
        <tr class="success">
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr class="info">
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr class="warning">
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr class="danger">
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
        </tr>
        </tbody>
    </table>
</div>
<!--table-responsive表示当表格内容多并且缩放的时候，会出现滚动条，响应式界面-->
<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
            <td>表格单元格表格单元格表格单元格表格单元格表格单元格表格单元格</td>
        </tr>
    </table>
</div>

</body>
</html>